<template>
  <div>
    <el-row :gutter="10" type="flex">
      <el-col :span="6">
        <el-card class="box-card" style="height: 100%">
          <div slot="header" class="clearfix">
            <span>当前用户总数</span>
          </div>
          <div style="font-size: 60px; text-align: center; font-weight: bolder">
            {{ userNum }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户注册趋势</span>
          </div>
          <div ref="userDataWrapper">
            <div
                ref="userData"
                :style="{
                height: userDataChartsSize.height + 'px',
                width: userDataChartsSize.width + 'px',
                margin: 'auto',
              }"
            ></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 20px" type="flex">
      <el-col :span="6">
        <el-card class="box-card" style="height: 100%">
          <div slot="header" class="clearfix">
            <span>当前博客总数</span>
          </div>
          <div style="font-size: 60px; text-align: center; font-weight: bolder">
            {{ blogNum }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>博客发布趋势</span>
          </div>
          <div ref="blogDataWrapper">
            <div
                ref="blogData"
                :style="{
                height: blogDataChartsSize.height + 'px',
                width: blogDataChartsSize.width + 'px',
                margin: 'auto',
              }"
            ></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 20px">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户位置分布</span>
          </div>
          <div ref="visitorDataWrapper">
            <div
                ref="visitorData"
                :style="{
                height: visitorDataChartsSize.height + 'px',
                width: visitorDataChartsSize.width + 'px',
                margin: 'auto',
              }"
            ></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 第一步, 要引入百度地图
// import "echarts/extension/bmap/bmap";
import authorService from "@/service/authorService";
import BlogService from "@/service/blogService";
import  starfield from "@/assets/images/starfield.jpg"
import world from "@/assets/images/world.topo.bathy.200401.jpg"
export default {
  name: "DBA",
  data() {
    return {
      userNum: 0,
      userDataChartsSize: {
        height: 300,
        width: 600,
      },
      userDataOptions: {
        type: 'category',
        dataZoom: {
          type: 'slider',
          xAxisIndex: [0],
          height: 20,
          bottom: 20,
        },
        boundaryGap: true,
        position: {
          bottom: "10%",
        },
        xAxis: {
          type: 'time',
          axisLabel: {
            formatter: function () {
              return '{yyyy}-{MM}-{dd} {HH}:{mm}'
            },
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: ['2022-05-01 05:22', '2022-05-02 05:22'],
            type: 'line'
          }
        ]
      },
      userDataCharts: null,
      blogNum: 0,
      blogDataChartsSize: {
        height: 300,
        width: 600,
      },
      blogDataOptions: {
        type: 'category',
        dataZoom: {
          type: 'slider',
          xAxisIndex: [0],
          height: 20,
          bottom: 20,
        },
        boundaryGap: true,
        position: {
          bottom: "10%",
        },
        xAxis: {
          type: 'time',
          axisLabel: {
            formatter: function () {
              return '{yyyy}-{MM}-{dd} {HH}:{mm}'
            },
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: ['2022-05-01 05:22', '2022-05-02 05:22'],
            type: 'line'
          }
        ]

      },
      blogDataCharts: null,
      visitorData: [],
      visitorDataChartsSize: {
        height: 300,
        width: 600,
      },
      visitorDataOptions: {
        backgroundColor: '#000',
        globe: {
          baseTexture: world,
          heightTexture: world,
          displacementScale: 0.04,
          shading: 'realistic',
          environment: starfield,
          realisticMaterial: {
            roughness: 0.9
          },
          postEffect: {
            enable: true
          },
          light: {
            main: {
              intensity: 5,
              shadow: true
            },
            ambientCubemap: {
              diffuseIntensity: 0.2
            }
          }
        }





        // 第二步: 百度地图的参数配置
        // bmap: {
        //   center: [114, 28],
        //   zoom: 5,
        //   roam: true,
        // },
        // series: [
        //   {
        //     type: "effectScatter",
        //     data: [[113, 27]],
        //     coordinateSystem: "bmap",
        //   },
        // ],
      },
      visitorDataCharts: null,
    }

  },

  mounted() {
    this.initUserTableCharts()
    this.initBlogTableCharts()
    this.initBmap()
  },
  methods: {
    initUserTableCharts() {
      this.userDataChartsSize.width = this.$refs.userDataWrapper.clientWidth
      this.userDataChartsSize.height = this.$refs.userDataWrapper.clientWidth * 0.3
      authorService.getuserReginsterInfo().then(rs => {
        this.userNum = rs.data.data.userInfo.length

        let timedata = [];
        for (let i = 0, len = rs.data.data.userInfo.length; i < len; i++) {
          timedata.push([new Date(rs.data.data.userInfo[i].createTime), 1]);
        }
        this.userDataOptions.series[0].data = timedata;
        this.userDataCharts = this.$echarts.init(this.$refs.userData)
        this.userDataCharts.setOption(this.userDataOptions)

      })
    },
    initBlogTableCharts() {
      this.blogDataChartsSize.width = this.$refs.blogDataWrapper.clientWidth
      this.blogDataChartsSize.height = this.$refs.blogDataWrapper.clientWidth * 0.3
      BlogService.getBlogInfo().then(rs => {
        this.blogNum = rs.data.data.blogInfo.length
        let timedata = [];
        for (let i = 0, len = rs.data.data.blogInfo.length; i < len; i++) {
          timedata.push([new Date(rs.data.data.blogInfo[i].lastModified), 1]);
        }
        this.blogDataOptions.series[0].data = timedata;
        this.blogDataCharts = this.$echarts.init(this.$refs.blogData)
        this.blogDataCharts.setOption(this.blogDataOptions)

      })
    },
    initBmap() {
      this.visitorDataChartsSize.width = this.$refs.visitorDataWrapper.clientWidth;
      this.visitorDataChartsSize.height = this.$refs.visitorDataWrapper.clientWidth * 0.5;
      this.$nextTick(() => {
        this.visitorDataCharts = this.$echarts.init(this.$refs.visitorData);
        this.visitorDataCharts.setOption(this.visitorDataOptions);
      })
      // let bmap = this.visitorDataCharts
      //       .getModel()
      //       .getComponent("bmap")
      //       .getBMap(); // 获取百度地图实例
      // bmap.setMapStyleV2({
      //     styleId: "f0744950d4a467f7ff7039b8b504e55d",
      //   });

    }
  }
}
</script>

<style>

</style>